<template>
  <div class="home-page">
    <Transition name="fade">
      <SearchView v-if="isSearchViewShown" @cancel="toggleSearchView"></SearchView>
    </Transition>
<!--    防止搜索页部分重新加载-->
    <div v-show="!isSearchViewShown">
      <!-- 调用组件并传递事件-->
      <Header @searchClick="toggleSearchView"/>
      <!-- 加载效果-->
      <OpLoading  type="skeleton">
        <FoodType></FoodType>
        <ScrollBar data=""></ScrollBar>
        <div class="home-page__activity">
          <div style="flex:5">
            <CountDown  />
          </div>

         <div style="width: 180px ;flex:5">
           <Swipe />
         </div>

        </div>
        <VanTabs sticky
                  offset-top="54px"
                  :color="'rgb(38, 184, 245)'"
                  :background="tabBackgroundColor"
                  @scroll="onTabScroll">
          <VanTab v-for="v in RECOM_TAB" :key="v.value" :title="v.title">
            <!--        自带属性 跳转-->
            <component :is="v.component" :type="v.value"></component>
          </VanTab>
        </VanTabs>
      </OpLoading>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import Header from "@/views/Tabber/home/components/Header.vue";
import {useToggle} from "@/use/useToggle.ts";
import SearchView from '@/views/Search/index.vue'
import OpLoading from "@/components/OpLoading.vue";
import FoodType from "@/views/Tabber/home/components/FoodType.vue";
import ScrollBar from "@/views/Tabber/home/components/ScrollBar.vue";
import CountDown from "@/views/Tabber/home/components/CountDown.vue";
import Swipe from "@/views/Tabber/home/components/Swipe.vue";
import {RECOM_TAB} from "@/views/Tabber/home/config.ts";
//调用hooks返回 一开始不展示SearchView
const [isSearchViewShown,toggleSearchView]=useToggle(false);
const tabBackgroundColor=ref('blue');
//粘性布局
const onTabScroll = ({ isFixed }: { isFixed: boolean }) => {
  tabBackgroundColor.value = isFixed ? 'white' : 'transparent'
}
</script>

<style scoped lang="scss">
//动画效果
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.home-page {
  width: 100%;
  background: var(--op-gray-bg-color);
  padding-bottom: 70px;

  &__activity {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px;

  }
}
</style>